<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <style>
        *{
            box-sizing: border-box;
        }
        #book{
            width: 600px;
            height: 600px;
            background-color: pink;
            margin: 0 auto;
        }
        .header{
            width: 600px;
            height: 150px;
        }
        .header h1{
            width: 600px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .header input{
            width: 400px;
            height: 30px;
            margin-left: 60px;
        }
        .header button{
            width: 60px;
            height: 30px;
            border-radius: 6px;
            border: none;
        }
        .main ul{
            margin-left: 20px;
        }
        .main ul li{
            width: 400px;
            height: 40px;
            line-height: 40px;
            list-style-type: none;
            border: 1px solid #e5e5e5;
            background-color: white;    
        }
        .but{
            display: none;
            width: 25px;
            height: 25px;
            float: right;
            margin-top: 5px;
            margin-right: 5px;
        }
        .main ul li:hover .but{
            display: block;
        }
        /* .footer{
            width: 600px;
            height: 40px;
            background-color:orange;
        } */
        .count{
            width: 400px;
            margin-left: 60px;
            background-color: white;
        }
        .count p{
            width: 400px;
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
        }
        .count button{
            width: 50px;
            height: 25px;
            margin-top: 8px;
            margin-right: 5px;
            float: right;
            border: none;
        }

    </style>
</head>
<body>
    <div id="book">
        <div class="header">
            <h1>记事本</h1>
            <input type="text" v-model="inpValue" @keyup.enter="add">
            <button @click="add">添加</button>
        </div>
        <div class="main">
            <ul>
                <li v-for="(item,index) in list">{{index+1}}.{{item}}
                    <button class="but" @click="remove(index)">-</button>
                </li>

            </ul>
        </div>
        <div class="count">
                <p><strong>{{list.length}}</strong>&nbsp;item<button @click="clear" v-if="list.length!=0">clear</button></p>
                
        </div>
            

    </div>

    <script>
        let app=new Vue({
            el:"#book",
            data:{
                list:['北京','深圳'],
                inpValue:"",
            },
            methods:{
                add:function(){
                    this.list.push(this.inpValue);
                },
                remove:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list=[];
                }
            }
        });
    </script>
    
</body>
</html>